<template>
  <div id="mobileSofeware">
    <detail en_name="MobileSofeware" cn_name="移动端产品" context=""></detail>
    <div id="context">
      <el-table
        :data="tableData"
        border
        fit="true"
        align='center'
        :cell-style='cellStyle'
        :header-cell-style='rowClass'
        style="width: 80%">
        <el-table-column
          prop="pid"
          label="产品编号"
          v-if=false>
        </el-table-column>

        <el-table-column
          prop=""
          label="产品图片"
          width="">
          <template slot-scope="scope">
            <el-image
              style="width: 230px; height: 100px"
              :src="scope.row.img"
              fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="产品名称"
          width="">
        </el-table-column>
        <el-table-column
          prop="description"
          label="产品描述"
          width="">
        </el-table-column>
        <el-table-column
          prop=""
          label="查看详情"
          width="">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">查看产品文章</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
    import Detail from "../../common/detail/detail";
    import {requestGet, requestPost} from "../../../networks/request";
    export default {
        name: "mobileSofeware",
      components: {Detail},
      data(){
        return {
          tableData:[]
        }
      },
      methods:{
        cellStyle({row, column, rowIndex, columnIndex}){
          return 'text-align:center';
        },
        rowClass({row, rowIndex}){
          return 'text-align:center';
        },
        handleClick(row) {
          this.$router.push("/Context/"+row.pid)
        },
      },
      mounted() {
          requestPost({
            url: 'product/selectByType',
            data: {
              type: 'mobile'
            }
          }).then(res=>{
            this.tableData = res.data;
          })
      }
    }
</script>

<style scoped>
  #context{
    margin: 0 auto;
    text-align: center;
    height: 1000px;
  }
</style>
